<script lang="ts" setup>
import { computed } from 'vue';

import { MdiEdit } from '@vben/icons';

import { Button, Divider, Input, message } from 'ant-design-vue';
import DOMPurify from 'dompurify';

import { updateHotelBaseInfoApi } from '#/api';
import TEditor from '#/components/TEditor.vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  defaultForm: {
    type: Object,
    default: () => ({}),
  },
  editStatus: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:form', 'update:editStatus', 'init']);

const formData = computed({
  get() {
    return props.form;
  },
  set(newValue) {
    emit('update:form', newValue);
  },
});

const edit = computed({
  get() {
    return props.editStatus;
  },
  set(newValue) {
    emit('update:editStatus', newValue);
  },
});

// 清理 HTML 内容
const cleanHtml = (html: string) => {
  return DOMPurify.sanitize(html);
};

// 更新事件
const init = () => {
  emit('init');
};

// 取消编辑事件
const cancelEdit = (key: string) => {
  edit.value[key] = false;
  init();
};

// 打开编辑事件 并关闭其他的编辑状态
const openEdit = (key: string) => {
  edit.value[key] = true;
  Object.keys(edit.value).forEach((item) => {
    if (item !== key && edit.value[item]) {
      cancelEdit(item);
    }
  });
};

// 保存事件
const handleSave = async (key: string) => {
  const arr: { [key: string]: any } = {
    roomCount: 'editCount',
    descriptionZh: 'editIntro',
  };
  // 处理提交参数
  const params = {
    ...props.defaultForm,
    [key]: formData.value[key],
  };
  try {
    await updateHotelBaseInfoApi(params);
    message.success('保存成功');
    cancelEdit(arr[key]);
  } catch (error) {
    console.error('保存失败：', error);
  }
};
</script>

<template>
  <div class="card-box mb-3 w-full rounded-md p-2">
    <div class="px-4 pb-6">
      <div class="pt-2">
        <div class="text-xl font-bold">详细信息</div>
      </div>
      <div>
        <div
          :class="[edit.editCount ? 'sticky top-[-21px]' : ' ']"
          class="card-box z-[10] flex items-center justify-between rounded-none border-none py-2 text-xl"
        >
          <div>客房总数</div>
          <div v-if="!edit.editCount">
            <Button
              class="flex h-auto items-center px-0"
              type="link"
              @click="openEdit('editCount')"
            >
              <template #icon>
                <MdiEdit class="text-primary mr-1" />
              </template>
              <span>编辑</span>
            </Button>
          </div>
          <div v-else class="flex items-center">
            <Button
              class="flex h-auto items-center px-6 py-2"
              @click="cancelEdit('editCount')"
            >
              <span>取消</span>
            </Button>
            <Button
              :disabled="formData.roomCount === ''"
              class="ml-2 flex h-auto items-center px-6 py-2"
              type="primary"
              @click="handleSave('roomCount')"
            >
              <span>保存</span>
            </Button>
          </div>
        </div>
        <div v-if="!edit.editCount">
          酒店房间总数：{{ formData.roomCount || '0' }}
        </div>
        <div v-else>
          <div>酒店房间总数</div>
          <div class="flex items-center pt-2">
            <Input
              v-model:value="formData.roomCount"
              :maxlength="30"
              :status="formData.roomCount === '' ? 'error' : ''"
              class="w-[460px] py-2"
              placeholder="请输入酒店房间总数"
              type="number"
            />
          </div>
        </div>
      </div>
      <Divider class="mb-3 mt-6" />
      <div>
        <div
          :class="[edit.editIntro ? 'sticky top-[-21px]' : ' ']"
          class="card-box z-[10] flex items-center justify-between rounded-none border-none py-2 text-xl"
        >
          <div>酒店简介</div>
          <div v-if="!edit.editIntro">
            <Button
              class="flex h-auto items-center px-0"
              type="link"
              @click="openEdit('editIntro')"
            >
              <template #icon>
                <MdiEdit class="text-primary mr-1" />
              </template>
              <span>编辑</span>
            </Button>
          </div>
          <div v-else class="flex items-center">
            <Button
              class="flex h-auto items-center px-6 py-2"
              @click="cancelEdit('editIntro')"
            >
              <span>取消</span>
            </Button>
            <Button
              :disabled="formData.descriptionZh === ''"
              class="ml-2 flex h-auto items-center px-6 py-2"
              type="primary"
              @click="handleSave('descriptionZh')"
            >
              <span>保存</span>
            </Button>
          </div>
        </div>
        <div v-if="!edit.editIntro">
          <div
            class="about max-w-[100%]"
            v-html="cleanHtml(formData.descriptionZh || '暂无')"
          ></div>
        </div>
        <div v-else>
          <p class="mb-2 text-xs text-gray-500">
            下方编辑器内容用于小程序关于酒店页面的简介，建议编辑后检查小程序中的展示情况。
          </p>
          <!--  @get-content="getContent" 监听编辑框内容变化 -->
          <TEditor v-model="formData.descriptionZh" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
